<html lang="en" xmlns:th="http://www.thymeleaf.org" ; xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" th:href="@{/layui1/css/layui.css}" media="all"><title>Title</title>
    <script th:src="@{/layui1/layui.js}"></script>
    <style>
        body {
            margin: 10px;
        }
    </style>
<body>

<!-- 右操作栏 -->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-radius" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-radius layui-btn-danger" lay-event="del">删除</a>
</script>

<!-- 头操作栏 -->
<script type="text/html" id="toolbarDemo">
    <button class="layui-btn " lay-event="add">添加</button>
    <button class="layui-btn layui-btn-danger" lay-event="deletes">删除</button>
</script>

<!--=============================弹出权限树==================================-->
<div class="layui-form-item" id="choose_parent_menu" style="display: none">
    <div class="layui-input-inline">
        <div id="deptTreeChoose" class="demo-tree-more"></div>
    </div>
</div>
<div class="layui-form-item" id="choose_parent_places" style="display: none">
    <div class="layui-input-inline">
        <div id="placesTreeChoose" class="demo-tree-more"></div>
    </div>
</div>



<!--=========================================================添加用户信息=============================================================-->
<form class="layui-form layui-form-pane" id="save_staff_form" style="display:none;margin: 10px">

                <div class="layui-form-item">
                    <label class="layui-form-label">姓名</label>
                    <div class="layui-input-block">
                        <input  name="staffName" id="staffName" lay-verify="required" lay-reqText="姓名不能为空"
                                autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">曾用名</label>
                    <div class="layui-input-block">
                        <input   name="chenName" id="chenName" lay-verify="required"
                                 autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">公民身份号码</label>
                    <div class="layui-input-block">
                        <input type="text" name="staffCard" id="staffCard"  lay-reqText="身份证不能为空" lay-verify="identity"
                               autocomplete="off" class="layui-input card">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">民族</label>
                    <div class="layui-input-block">
                        <select name="nation" id="nation">

                        </select>
                    </div>
                </div>
    <div class="layui-form-item">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-inline">
            <select name="sex" id="sex">
                <option value="">性别</option>
                <option value="0">男</option>
                <option value="1">女</option>
            </select>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">出生日期</label>
            <div class="layui-input-inline">
                <input   id="date" name="date"  autocomplete="off" class="layui-input date">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">户籍地省市县（区）</label>
        <div class="layui-input-inline">
            <input  name="domicile" id="domicile" lay-verify="domicile"  autocomplete="off" class="layui-input">
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">户籍地详址</label>
            <div class="layui-input-inline">
                <input name="domAddress" id="domAddress" lay-verify="domAddress"  autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">居住地所属县区</label>
        <div class="layui-input-inline">
            <input type="text" name="nowAddress" id="nowAddress" lay-verify="nowAddress"  autocomplete="off" class="layui-input">
        </div>
        <label class="layui-form-label">居住地详址</label>
        <div class="layui-input-inline">
            <input type="text" name="detailedAddress" id="detailedAddress" lay-verify="detailedAddress"  autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">文化程度</label>
        <div class="layui-input-inline">
            <select name="education" id="education">
            </select>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">兵役状况</label>
            <div class="layui-input-inline">
                <select name="military" id="military">
                </select>
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">婚姻状况</label>
        <div class="layui-input-inline">
            <select name="marriage" id="marriage">
            </select>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">政治面貌</label>
            <div class="layui-input-inline">
                <select name="politics" id="politics">
                </select>
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">身高</label>
        <div class="layui-input-inline">
            <input type="text" name="height"
                   autocomplete="off" class="layui-input">
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">血型</label>
            <div class="layui-input-inline">
                <select name="blood">
                    <option value="">请选择</option>
                    <option value="0">O型</option>
                    <option value="1">A型</option>
                    <option value="2">B型</option>
                    <option value="3">AB型</option>
                    <option value="4">其他型</option>
                </select>
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">籍贯</label>
        <div class="layui-input-inline">
            <input type="text" name="nativea"
                   autocomplete="off" class="layui-input">
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">居住地所属派出所</label>
            <div class="layui-input-inline">
                <input type="text" name="police"
                       autocomplete="off" class="layui-input police">
            </div>
        </div>
    </div>


    <div class="layui-form-item" align="center">
        <div class="layui-inline">
            <button class="layui-btn layui-btn-primary layui-btn-radius" lay-submit lay-filter="formDemo">
                <i class="layui-icon layui-icon-release"></i> 立即提交
            </button>
        </div>
        <div class="layui-inline">
            <button type="reset" class="layui-btn layui-btn-primary layui-btn-radius"><i class="layui-icon layui-icon-refresh"></i>重置
            </button>
        </div>
    </div>
</form>



<!--=========================================================更新用户信息=============================================================-->
<form class="layui-form layui-form-pane" id="update_staff_form" style="display:none;margin: 10px" lay-filter="example" lay->
    <table class="layui-table" lay-even lay-skin="nob">

        <div class="layui-form-item" style="display: none">
            <label class="layui-form-label">编号 </label>
            <div class="layui-input-inline">
                <input type="text" name="id" required  autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <tr>
            <td>
                <div class="layui-form-item">
                    <label class="layui-form-label">姓名</label>
                    <div class="layui-input-inline">
                        <input  name="staffName" lay-verify="staffName" placeholder="请输入用户名"
                                autocomplete="off" class="layui-input">
                    </div>
                </div>
            </td>
            <td rowspan="3">
                    <div class="layui-upload-drag" id="test10">
                        <i class="layui-icon"></i>
                        <p>点击上传，或将文件拖拽到此处</p>
                        <div class="layui-hide" id="uploadDemoView">
                            <hr>
                            <img src="" alt="上传成功后渲染" style="max-width: 196px" id="pic">
                        </div>
                    </div>
            </td>
        </tr>
        <tr>
            <td>
                <div class="layui-form-item">
                    <label class="layui-form-label">曾用名</label>
                    <div class="layui-input-inline">
                        <input   name="chenName"
                                 autocomplete="off" class="layui-input">
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div class="layui-form-item">
                    <label class="layui-form-label">公民身份号码</label>
                    <div class="layui-input-inline">
                        <input type="text" name="staffCard" lay-verify="identity" lay-reqText="身份证不能为空"
                               autocomplete="off" class="layui-input card">
                    </div>
                </div>
            </td>
        </tr>
    </table>

    <div class="layui-form-item">
        <label class="layui-form-label">民族</label>
        <div class="layui-input-block">
            <select name="nation" id="nation1" >
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-inline">
            <select name="sex">
                <option value="">性别</option>
                <option value="0">男</option>
                <option value="1">女</option>
            </select>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">出生日期</label>
            <div class="layui-input-inline">
                <input   id="date1" name="date" autocomplete="off" class="layui-input date" lay-verify="date">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">户籍地省市县（区）</label>
        <div class="layui-input-inline">
            <input  name="domicile" lay-verify="domicile"  autocomplete="off" class="layui-input">
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">户籍地详址</label>
            <div class="layui-input-inline">
                <input name="domAddress" lay-verify="domAddress"  autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">居住地所属县区</label>
        <div class="layui-input-inline">
            <input type="text" name="nowAddress" lay-verify="nowAddress"  autocomplete="off" class="layui-input">
        </div>
        <label class="layui-form-label">居住地详址</label>
        <div class="layui-input-inline">
            <input type="text" name="detailedAddress" lay-verify="detailedAddress"  autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">文化程度</label>
        <div class="layui-input-inline">
            <select name="education" id="education1">
            </select>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">兵役状况</label>
            <div class="layui-input-inline">
                <select name="military" id="military1">
                </select>
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">婚姻状况</label>
        <div class="layui-input-inline">
            <select name="marriage" id="marriage1">

            </select>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">政治面貌</label>
            <div class="layui-input-inline">
                <select name="politics" id="politics1">
                </select>
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">身高</label>
        <div class="layui-input-inline">
            <input type="text" name="height"
                   autocomplete="off" class="layui-input">
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">血型</label>
            <div class="layui-input-inline">
                <select name="blood">
                    <option value="">请选择</option>
                    <option value="0">O型</option>
                    <option value="1">A型</option>
                    <option value="2">B型</option>
                    <option value="2">AB型</option>
                    <option value="2">其他型</option>
                </select>
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">籍贯</label>
        <div class="layui-input-inline">
            <input type="text" name="nativea" lay-verify="required"
                   autocomplete="off" class="layui-input">
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">居住地所属派出所</label>
            <div class="layui-input-inline">
                <input type="text" name="police"
                       autocomplete="off" class="layui-input police">
            </div>
        </div>
    </div>


    <div class="layui-form-item" align="center">
        <div class="layui-inline">
            <button class="layui-btn layui-btn-primary layui-btn-radius" lay-submit lay-filter="updateFormDemo">
                <i class="layui-icon layui-icon-release"></i> 立即提交
            </button>
        </div>
        <div class="layui-inline">
            <button type="reset" class="layui-btn layui-btn-primary layui-btn-radius"><i class="layui-icon layui-icon-refresh"></i>重置
            </button>
        </div>
    </div>
</form>



<!--=========================================================多条件查询================================================================-->
<fieldset class="table-search-fieldset">
    <legend>查询条件</legend>
    <div style="margin: 10px 10px 10px 10px">
        <form class="layui-form layui-form-pane" id="search" lay-filter="search">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">人员姓名</label>
                    <div class="layui-input-inline">
                        <input type="text" id="searchstaffName" name="searchstaffName" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">公民身份号码</label>
                    <div class="layui-input-inline">
                        <input type="text" id="searchstaffCard" name="searchstaffCard" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn layui-btn-primary" lay-submit lay-filter="search_filter">
                        <i class="layui-icon"></i> 搜 索
                    </button>
                    <button class="layui-btn layui-btn-primary" lay-filter="search_reset"><i
                            class="layui-icon layui-icon-refresh"></i> 重置
                    </button>
                </div>
            </div>
        </form>
    </div>
</fieldset>

<!-- 数据表格 -->
<table id="staffTable" lay-filter="test"></table>


</body>

<script>

    layui.use(['table','tree', 'form', 'layer','laydate','jquery','upload'], function () {
        var $ = layui.jquery;
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        var laydate = layui.laydate;
        var tree = layui.tree;
        var upload = layui.upload;

        //初始化身份证下拉框
        $(function () {
            //民族下拉框
            $.ajax({
                url: "/dic/notionList",
                type: 'get',
                dataType: 'json',
                data:{'i':1},
                success: function (result) {
                    if (result!=null){
                        var res = result.data;
                        for(var i=0;i<res.length;i++){
                            var opt = $("<option value='"+res[i].nation+"'>"+res[i].nation+"</option>");
                            var opt1 = $("<option value='"+res[i].nation+"'>"+res[i].nation+"</option>");
                            $("#nation").append(opt);
                            $("#nation1").append(opt1);
                        }
                    }
                    form.render('select');
                }
            });
            //拖拽上传
            upload.render({
                elem: '#test10'
                ,url: '/staff/uploadPic' //改成您自己的上传接口
                ,done: function(res){
                    layer.msg('上传成功');
                    var url = "https://"+res.name;
                    layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', url);
                    console.log(res)
                }
            });

            //点击上级菜单弹出菜单树
            $(".police").click(function () {
                $.ajax({
                    url: '/SignIn/findDept',
                    dataType: 'json',
                    contentType: "application/json;charset=UTF-8",
                    type: 'GET',
                    success: function (result) {
                        //基本演示
                        //console.log(result)
                        tree.render({
                            elem: '#deptTreeChoose'
                            , data: result
                            , onlyIconControl: true
                            , click: function (obj) {
                                //console.log(obj);
                                $(".police").val(obj.data.title);
                                layer.close(index);
                            }
                        });
                    }
                });
                var  index =layer.open({
                    title: '归属派出所',
                    type: 1,
                    content: $('#choose_parent_menu'),
                    area: ['400px', '350px']
                });
            });

            $.ajax({
                //婚姻下拉框
                url: "/dic/notionList",
                type: 'get',
                dataType: 'json',
                data:{'i':2},
                success: function (result) {
                    if (result!=null){
                        var res = result.data;
                        for(var i=0;i<res.length;i++){
                           var opt = $("<option value='"+res[i].nation+"'>"+res[i].nation+"</option>");
                         var opt1= $("<option value='"+res[i].nation+"'>"+res[i].nation+"</option>");
                            $("#marriage1").append(opt);
                       $("#marriage").append(opt1);


                        }
                    }
                    form.render('select');
                }
            });

            $.ajax({
            //文化程度下拉框
            url: "/dic/notionList",
            type: 'get',
            dataType: 'json',
            data:{'i':3},
            success: function (result) {
                if (result!=null){
                    var res = result.data;
                    for(var i=0;i<res.length;i++){
                        var opt = $("<option value='"+res[i].nation+"'>"+res[i].nation+"</option>");
                        var opt1= $("<option value='"+res[i].nation+"'>"+res[i].nation+"</option>");
                        $("#education").append(opt);
                        $("#education1").append(opt1);


                    }
                }
                form.render('select');
            }
        });

            $.ajax({
                //文化程度下拉框
                url: "/dic/notionList",
                type: 'get',
                dataType: 'json',
                data:{'i':4},
                success: function (result) {
                    if (result!=null){
                        var res = result.data;
                        for(var i=0;i<res.length;i++){
                            var opt = $("<option value='"+res[i].nation+"'>"+res[i].nation+"</option>");
                            var opt1= $("<option value='"+res[i].nation+"'>"+res[i].nation+"</option>");
                            $("#military").append(opt);
                            $("#military1").append(opt1);


                        }
                    }
                    form.render('select');
                }
            });



            $.ajax({
                //文化程度下拉框
                url: "/dic/notionList",
                type: 'get',
                dataType: 'json',
                data:{'i':5},
                success: function (result) {
                    if (result!=null){
                        var res = result.data;
                        for(var i=0;i<res.length;i++){
                            var opt = $("<option value='"+res[i].nation+"'>"+res[i].nation+"</option>");
                            var opt1= $("<option value='"+res[i].nation+"'>"+res[i].nation+"</option>");
                            $("#politics").append(opt);
                            $("#politics1").append(opt1);


                        }
                    }
                    form.render('select');
                }
            });

    });

        //表单验证
        form.verify({
            staffName: function(value, item){ //value：表单的值、item：表单的DOM对象
                if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
                    return '用户名不能有特殊字符';
                }
                if(/(^\_)|(\__)|(\_+$)/.test(value)){
                    return '用户名首尾不能出现下划线\'_\'';
                }
                if(/^\d+\d+\d$/.test(value)){
                    return '用户名不能全为数字';
                }
            }

            //我们既支持上述函数式的方式，也支持下述数组的形式
            //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
            ,pass: [
                /^[\S]{6,12}$/
                ,'密码必须6到12位，且不能出现空格'
            ]
        });

        //执行table
        var mynotifi = table.render({
            elem: '#staffTable'
            , url: '/staff/staffList' //数据接口
            , id: 'tableReload'//利用id重载数据表格
            , title: '通知公告表'
            , toolbar: '#toolbarDemo' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            , page: true //开启分页
            , skin: 'row'
            , even: true
            , size: 'lg'
            , limit: 10
            , limits: [10, 20, 30, 40, 50, 60]
            , cols: [
                [ //表头
                    {type: 'checkbox', fixed: 'left'}
                    , {field: 'id', title: '编号', width: '12%', align: 'center'}
                    , {field: 'staffName', title: '员工姓名', width: '10%', align: 'center'}
                    , {field: 'chenName', title: '曾用名', width: '10%', align: 'center',hide:true}
                    , {field: 'petrolStationId', title: '加油站id', width: '10%', align: 'center',hide:true}
                    , {field: 'staffComp', title: '所属企业', width: '10%', align: 'center'},
                    , {field: 'staffCard', title: '公民身份证号码', width: '10%', align: 'center'}
                    , {field: 'delFlag', title: '删除标志', width: '10%', align: 'center',hide:true}
                    , {field: 'sex', title: '性别', width: '10%', align: 'center',templet:function (d) {
                        if (d.sex==0){
                            return '男'
                        }else {
                            return '女'
                        }
                    }}
                    , {field: 'date', title: '出生日期', width: '10%', align: 'center'}
                    , {field: 'nation', title: '民族', width: '10%', align: 'center'}
                    , {field: 'domicile', title: '户籍地所属县区', width: '10%', align: 'center'}
                    , {field: 'domAddress', title: '籍详细地址', width: '10%', align: 'center'}
                    , {field: 'nowAddress', title: '现居住地所属县区', width: '10%', align: 'center'}
                    , {field: 'detailedAddress', title: '现居住地详址', width: '10%', align: 'center'}
                    , {field: 'education', title: '文化程度', width: '10%', align: 'center'}
                    , {field: 'military', title: '兵役状况', width: '10%', align: 'center',hide:true}
                    , {field: 'marriage', title: '婚姻状况', width: '10%', align: 'center',hide:true}
                    , {field: 'nativea', title: '籍贯', width: '10%', align: 'center'}
                    , {field: 'politics', title: '政治面貌', width: '10%', align: 'center',hide:true}
                    , {field: 'height', title: '身高', width: '10%', align: 'center',hide:true}
                    , {field: 'blood', title: '血型', width: '10%', align: 'center',hide:true}
                    , {field: 'police', title: '居住地所属派出所', width: '10%', align: 'center',hide:true}
                    , {fixed: 'right', title: '查看', width: '15%', align: 'center', toolbar: '#barDemo'}
                ]]
        });




        //监听头工具栏事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id)
                , data = checkStatus.data; //获取选中的数据
            switch (obj.event) {
                case 'add':
                    layer.open({
                        title: '发布内容',
                        type: 1,
                        content: $('#save_staff_form'),
                        area: ['690px', '720px']
                    });
                    break;
                case 'deletes':
                    if (data.length === 0) {
                        layer.msg('请选择一行');
                    } else {
                        //对于删除或者是其他敏感操作，一定要让用户确认。
                        layer.confirm('确定要删除吗？', function () {
                            //请求后台批量删除接口
                            $.ajax({
                                url: '/staff/deleteBatchStaff',
                                dataType: 'json',
                                contentType: "application/json;charset=UTF-8",
                                type: 'POST',
                                data: JSON.stringify(data),//将js对象转成json串传入到后台
                                success: function (result) {
                                    layer.closeAll();//关闭对话框
                                    layer.msg(result.msg);
                                    mynotifi.reload();//重新加载表格数据
                                },
                                error:function (result) {
                                    layer.msg(result.msg);
                                }
                            })
                        })
                    }
                    break;
            };
        });
        //常规用法
        laydate.render({
            elem: '#date1'
        });

        //常规用法
        laydate.render({
            elem: '#date'
        });

        //通过点击事件自动把身份证号码转换为日期格式
        $(".date").click(function () {
            var str = $(".card").val();
            $.ajax({
                url: '/staff/fmtDate',
                dataType: 'json',
                //contentType: "application/json;charset=UTF-8",
                type: 'post',
                data: {"str":str},//将js对象转成json串传入到后台
                success: function (result) {
                    console.log(result);
                 if(result.code==0){
                     $(".date").val(result.data);
                 }
                }
            });
        })


        //监听行工具事件
        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 的lay-filter="对应值"属性
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent === 'del'){
                layer.confirm('真的删除行么', function(index){
                    //obj.del(); //删除对应行（tr）的DOM结构
                    layer.close(index);
                    //向服务端发送删除指令
                    $.ajax({
                        url: '/staff/deleteStaff',
                        dataType: 'json',
                        type: 'get',
                        data: {"id": data.id},//将js对象转成json串传入到后台
                        success: function (result) {
                            layer.closeAll();//关闭对话框
                            layer.msg(result.msg);
                            mynotifi.reload();//重新加载表格数据
                        },
                        error:function (result) {
                            layer.msg(result.msg);
                        }
                    })
                });
            }else if (layEvent === 'edit') {
                //将修改前的数据赋值给修改表单
                form.val('example', {
                    "id": data.id,
                    "staffName": data.staffName // "name": "value"
                    , "staffCard": data.staffCard
                    , "nation": data.nation
                    , "sex": data.sex
                    , "date": data.date
                    , "domicile": data.domicile
                    , "domAddress": data.domAddress
                    , "nowAddress": data.nowAddress
                    , "detailedAddress": data.detailedAddress
                    , "education": data.education
                    , "military": data.military
                    , "marriage": data.marriage
                    , "politics": data.politics
                    , "nativea": data.nativea
                    , "police": data.police
                });

                layer.open({
                    title: '编辑标题',
                    type: 1,
                    content: $('#update_staff_form'),
                    area: ['690px', '720px']
                });
            }
        });

        //监听保存部门表单的提交
        form.on('submit(formDemo)', function (data) {
            //layer.msg(JSON.stringify(data.field));
            console.log(data)
            $.ajax({
                url: '/staff/saveStaff',
                dataType: 'json',
                type: 'post',
                data: data.field,
                success: function (result) {
                    layer.closeAll();//关闭对话框
                    layer.msg(result.msg);
                    mynotifi.reload();//重新加载表格数据
                },
                error:function (result) {
                    layer.msg(result.msg);
                }
            })
            return false;
        });

        //监听修改部门表单的提交
        form.on('submit(updateFormDemo)',function (data) {
            $.ajax({
                url: '/staff/updateStaff',
                dataType: 'json',
                type: 'POST',
                data:  data.field,
                success: function (result) {
                    layer.closeAll();//关闭对话框
                    layer.msg(result.msg);
                    mynotifi.reload();//重新加载表格数据
                },
                error:function (result) {
                    layer.msg(result.msg);
                }
            })
            return false;
        });


        //重置,多条件搜索form表单
        form.on('(search_reset)', function () {
            //重置form表单
            $("#searchForm")[0].reset();

            //刷新页面
            table.reload("tableReload");
        });

        //监听查询表单的提交事件
        form.on('submit(search_filter)', function (data) {
            var formData = data.field;
            var searchstaffName = formData.searchstaffName;
            var searchstaffCard = formData.searchstaffCard;
            console.log(searchstaffName)
            console.log(searchstaffCard)
            //数据表格重载
            table.reload('tableReload', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                , where: {//这里传参  向后台
                    searchstaffName: searchstaffName,
                    searchstaffCard: searchstaffCard
                }
            });
            return false;//false：阻止表单跳转  true：表单跳转
        });

    });


</script>
</html>